<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
    <div class="container" id="app">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 well">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label" >姓名：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="" readonly v-model="currentUser.name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">年龄：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="" readonly v-model="currentUser.age">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">地址：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="" readonly v-model="currentUser.addr">
                        </div>
                    </div>
                    <p>个人简介：{{currentUser.intro}}</p>
                </form>
                <button class="btn btn-info" v-on:click="handleClick" data-id="1">赵铁柱</button>
                <button class="btn btn-info" v-on:click="handleClick" data-id="2">特朗普</button>
            </div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const users = [
            {
                id:1,
                name:"赵铁锤",
                age:25,
                addr:"北京朝阳区",
                intro:'我的铁锤已经饥渴难耐了',
            },
            {
                id:2,
                name:"特朗普",
                age:70,
                addr:"美国",
                intro:'i am sb'
            }
        ]
        const app = new Vue({
            el: '#app',//element，挂载的容器
            data: {
                currentUser:{},
            },
            methods:{
                handleClick(e){
                    const id = e.target.dataset.id
                    console.log(id)
                    this.currentUser = users.filter((user) => user.id == id)[0]
                }
            }
        })
    </script>
</body>

</html>